<template>
  <view class="" @click.stop="state.show = true">
    <uni-easyinput disabled :input-border="inputBorder" :styles="styles" :value="checkedObj?.nickname" :placeholder-style="placeholderStyle" :placeholder="placeholder">
      <template #right>
        <text class="iconfont icon-a-ziyuan12" style="font-size: 22rpx; color: #666666" />
      </template>
    </uni-easyinput>
  </view>
  <su-popup :show="state.show" @close="state.show = false">
    <view class="model-box">
      <view class="title-box">
        <view class="title">
          {{ title }}
        </view>
        <text class="close iconfont icon-a-ziyuan14" @tap.stop="state.show = false" />
      </view>
      <scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
        <view v-if="!isEmpty(state.list)" class="ss-p-20">
          <view v-for="item in state.list" class="ss-flex ss-col-center ss-p-y-20" @tap.stop="onClick(item)">
            <uni-icons v-if="item.usercode === _value" color="var(--ui-BG-Main)" type="circle-filled" size="28" />
            <uni-icons v-else type="circle" color="var(--ui-BG-Main)" size="28" />
            <view class="ss-font-32 ss-m-l-20">
              {{ item.nickname }}
            </view>
          </view>
        </view>
        <s-empty v-else text="暂无数据" />
      </scroll-view>
    </view>
  </su-popup>
</template>

<script setup>
/**
 *
 * 标题栏
 *
 * @property {String} title 				- 标题
 * @property {String} subTitle 				- 副标题
 * @property {Number} height 				- 高度
 * @property {String} Type = [left | right | center | between]					- 样式
 *
 */
import { computed, onMounted, reactive, watch, ref } from 'vue'
import sheep from '@/sheep'
import { getDictOptions, getDictLabel } from '@/sheep/helper/dict'
import { isEmpty, isArray, cloneDeep, concat, isNumber } from 'lodash-es'
// 数据
const state = reactive({
  show: false,
  list: []
})

// 接收参数
const props = defineProps({
  modelValue: {
    type: String,
    default: null
  },
  placeholder: {
    type: String,
    default: '请选择人员'
  },
  title: {
    type: String,
    default: '选择人员'
  },
  inputBorder: {
    type: Boolean,
    default: false
  },
  styles: {
    type: Object,
    default: () => {
      return { disableColor: '#fff', color: '#333' }
    }
  },
  placeholderStyle: {
    type: String,
    default: 'color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal'
  },
  height: {
    type: Number,
    default: 100
  }
})
const emit = defineEmits(['update:modelValue'])
const _value = computed({
  get() {
    return props.modelValue
  },
  set(v) {
    emit('update:modelValue', v)
  }
})
const dictOptions = getDictOptions('transferbill_type')
const checkedObj = ref(null)

watch(() => _value.value, (val) => {
  if (!val) {
    checkedObj.value = null
  } else {
    if (!isEmpty(state.list)) {
      checkedObj.value = state.list.find((item) => _value.value === item.usercode)
      console.log('---', checkedObj.value)
    }
  }
}, {
  immediate: true,
  deep: true
})

const onClick = (item) => {
  _value.value = item.usercode
  state.show = false
}

onMounted(async() => {
  const { data, code } = await sheep.$api.common_system.getuser()
  if (code === 0) {
	  state.list = data.map((item) => {
      item.checked = false
      return item
    })
    checkedObj.value = state.list.find((item) => _value.value === item.usercode)
  }
})
</script>

<style lang="scss" scoped>
.model-box {
	height: 60vh;
}
.title-box {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	text-align: center;
	.title{
		width: 70%;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.close{
		position: absolute;
		right: 35rpx;
		font-size: 25rpx;
		top: 50%;
		transform: translateY(-50%);
		
	}
}
.model-content {
	height: calc(100% - 120rpx);
}
// .modal-footer {
// 	width: 100%;
// 	height: 120rpx;
// 	background: #fff;
// }
// .confirm-btn {
// 	width: 710rpx;
// 	margin-left: 20rpx;
// 	height: 80rpx;
// 	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
// 	border-radius: 40rpx;
// 	color: #fff;
// }

</style>
